import { defineStore } from "pinia";

type Theme = 'light' | 'dark';
export const useAppStore = defineStore('app', {
  state: () => ({
    transitionName: 'fade' as 'fade' | 'slide-left' | 'slide-right' | 'zoom' | 'bottom' | 'none',
    theme: (localStorage.getItem('theme') || 'light') as Theme,
  }),
  actions: {
    setTransitionName(name: typeof this.transitionName) {
      this.transitionName = name;
    },
    // 添加切换主题的 action
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light';
      //  将新主题存入 localStorage
      localStorage.setItem('theme', this.theme);
      // 更新 <html> 标签的 class
      if (this.theme === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    },
    //  添加一个初始化主题的 action，在 App 加载时调用
    initTheme() {
      if (this.theme === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    }
  }
});
